<template>
  <div>
		<van-nav-bar  title="预定配置" left-arrow @click-left="$utils.back($route.path)" />
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
			<div  class="reserveList">
				<div v-for="(item,index) in list" :key="index" class="reserve plr-24 ptb-50 mg-24">
					<div class="fs-32">{{item.Name}}</div>
					<div class="editReserve" @click="editReserve(item.ID)">编辑配置</div>
				</div>
			</div>
		</van-list>
		<div class="roomBtn" v-show="isShowBtn">
			<button class="addReserve" @click="addReserve">添加配置</button>
		</div>
	</div>
</template>
<script>
import { GetProductBookSettingPage } from 'api/teaHouse'
export default {
	data() {
		return {
			list:[],
			// 请求参数
			requestData: {
				PageIndex: 1,
				PageSize: 10,
			},
			finished: false,
			loading: false,
			blank: false,  // 是否为空数据
			isShowBtn: true,
		}		
	},
	created() {
		
  },
  mounted() {
    this.GetProductBookSettingPage()
  }, 
  methods: {
		// 上拉加载更多
		moreData() {
      this.requestData.PageIndex = this.requestData.PageIndex + 1
      this.GetProductBookSettingPage()
    },
		GetProductBookSettingPage(){
			const _this = this
			_this.loading = true
			GetProductBookSettingPage(this.requestData).then(res => {
					if (res.State == 0) {
							_this.isShowBtn = false
							_this.finished = true
							_this.loading = false
							return
					}
					if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
							_this.finished = true
					} else {
							_this.finished = false
					}
					_this.blank = false
					_this.loading = false
					_this.list = _this.list.concat(res.Data.Data)
					if (_this.list.length == 0) {
							_this.blank = true
					}
			})
		},
		addReserve(){
			this.$router.push({
				path: 'reserveSetting',
				query: {
					saleType:this.requestData.saleType
				}
			})
		},
		editReserve(id){
			console.log(id,"编辑")
			this.$router.push({
				path: 'reserveSetting',
				query: {
					saleType:this.requestData.saleType,
					id:id
				}
			})
		},
	}
}
</script>
<style lang="scss" scoped>
	.roomBtn{
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background: #fff;
	}
	.addReserve{
		width: 690px;
		height: 90px;
		line-height: 90px;
		background: $primary15;
		border-radius: 56px;
		text-align: center;
		color: #fff;
		font-size: 36px;
		border: 2px solid $primary15;
		margin: 24px auto;
	}
	.reserve{
		display: flex;
    background: #fff;
    border-radius: 24px;
    justify-content: space-between;
		align-items: center;
	}
	.editReserve{
		width: 170px;
		height: 64px;
		line-height: 64px;
		background: #FFFFFF;
		border-radius: 32px;
		border: 1px solid $primary15;
		font-size: 28px;
		color: $primary15;
		text-align: center;
	}
	.reserveList{
		overflow: scroll;
		padding-bottom: 150px;
	}
</style>
